<template>
  <div class="approval" v-title data-title="孵化项目立项审批界面">
    <home-nav :userData="userinfo"></home-nav>
    <div class="banner"></div>

    <div class="project-summary" ref="imageWrapper">
      <div style="color: #333; font-size: 18px; font-weight: bold;margin: 15px 0px">
        <span style="margin-right:30px">
          项目编号：{{ projectAuditInfo.hatchProject.hatchProjectNo }}
        </span>
        <span style="margin-right:30px">
          项目名称：{{ projectAuditInfo.hatchProject.hatchProjectName }}
        </span>
        <span v-if="projectAuditInfo.hatchProject.leaders"> 
          项目经理：{{ projectAuditInfo.hatchProject.leaders }}
        </span>
      </div>
      <ul>
        <li :class="{ clickShow: pageId == 1 }" @click="handleToggle(1)">项目概述</li>
        <li :class="{ clickShow: pageId == 2 }" @click="handleToggle(2)">附件</li>
      </ul>
      <div class="project-container" v-show="pageId == 1">
        <!-- 项目基本信息 -->
        <div class="info-title">
          <img src="@/assets/category-blue.png" alt="" />
          <span>项目基本信息</span>
        </div>
        <project-build-basic-show :project-audit-info="projectAuditInfo" :key="basicFreshKey"></project-build-basic-show>

        <!-- 项目审批意见 -->
        <div class="approval-opinion" v-if="processInstanceId&&processInstanceId!==''">
          <div class="info-title">
            <img src="@/assets/category-blue.png" alt="" />
            <span>项目审批意见</span>
          </div>
          <div class="process-engine" v-if="loadProcess">
            <ht-approval
              ref="childrenRef"
              :process-instance-id="processInstanceId"
              :options="options"
              :custom="custom"
              @submit="afterSubmit"
              @reject="afterReject"
              @back="backAction"
              @cancelSubmit="afterCancelSubmit"
              :before-fill-opinion="saveNotifyOpinion"
              :before-submit="beforeSubmit"
              :before-reject="beforeReject"
              :show-task-history="true"
              :history-dialog="historyDialog"
              :task-load="taskLoad"
              :message-id="messageId"
              :show-upload-btn="false"
              :hidden-task-def-key="hiddenTaskDefKey"
              :snapshotConfigs="snapshotConfigs"
              :progress-variables="progressVariables"
            >
            </ht-approval>
            <!-- <GcApprovalTips v-if="projectClass==40 && projectType !='S' "/> -->
          </div>
        </div>
      </div>
      <div class="project-container" v-show="pageId == 2">
        <div class="attachment-detail">
          <attach-page />
        </div>
      </div>

      <ul class="floatNav" v-show="floatNavShow">
        <li :class="{ clickShow: pageId == 1 }" @click="handleToggle(1)">项目概述</li>
        <li :class="{ clickShow: pageId == 2 }" @click="handleToggle(2)">附件</li>
        <!-- <li v-if="outShowPrintBtn" @click="print()">打印</li> -->
        <li v-if="isCanEdit === '1'" @click="handleEdit()">编辑</li>
      </ul>
    </div>
    <a-back-top style="right: 50px" />
  </div>
</template>
<script>
import Vue from 'vue'
import '@/config/upload.install.js'
import { getAction, getActionAsync, previewAttach } from '@/api/manage'
import { ACCESS_TOKEN, USER_NAME } from '@/store/mutation-types'
import { getParamValFromUrl, caseToShow } from '@/utils/common.js'
export default {
  components: {
    htApproval: () => import('@/config/ht-approval.umd.min.js'),
    HomeNav: () => import('@/components/layouts/HomeNav'),
    ProjectBuildBasicShow: () => import('@/components/tools/hatchProjectBuildStep/ProjectBuildBasicShow'),
    AttachPage: () => import('@/views/hatchProjectBuildStep/AttachPage'),
  },
  data() {
    return {
      viewType:'approval',
      pageId: 1,
      loadProcess: false,
      floatNavShow: false,
      showHistoryList:false,
      loading: false,
      url: {
        getProjectAuditById: '/hatchProject/getProjectAuditById',
        auditProjectPass: '/hatchProject/auditProjectPass',
        auditProjectNotPass: '/hatchProject/auditProjectNotPass',
        auditProjectBack: '/hatchProject/auditProjectBack',
        auditProjectCancel: '/hatchProject/auditProjectCancel',
        getAttachesList: '/tp/attach/getAttaches',
        getMangerAndAuditUser: '/projectBuildAudit/getMangerAndAuditUser',
        checkProjectBuildIsCanEdit: '/projectBuildAudit/checkProjectBuildIsCanEdit',
        codeInfoList: '/manage/codeInfo/list'
      },
      projectBuildId: '',
      projectClass: '',
      projectType: '',
      projectAuditInfo: {
        hatchProject: {
          projectClass: '0',
        },
      },
      projectBuild: {},
      tabPosition: 'top',
      tabBarStyle: {},
      attachmentColumns: [
        {
          title: '附件名称',
          dataIndex: 'fileName',
          width: '55%',
        },
        {
          title: '上传人',
          dataIndex: 'uploaderName',
          width: '15%',
          align: 'center',
        },
        {
          title: '上传时间',
          dataIndex: 'uploadTime',
          width: '15%',
          align: 'center',
        },
        {
          title: '文件大小',
          dataIndex: 'size',
          width: '15%',
          align: 'center',
        },
        { title: '操作', dataIndex: 'url', width: '10%', scopedSlots: { customRender: 'toAttach' } },
      ],
      attachmentData: [],
      innerdata: [],
      expandedRowKeys: [],
      userinfo: {
        info: this.$store.getters.userInfo,
        module: 'approval',
      },
      options: {
        request: {
          baseUrl: this.API_BASE_URL, // 业务系统根路径
          timeOut: 10000, // 请求超时时间
          interceptors: (config) => {
            config.headers['X-Access-Token'] = Vue.ls.get(ACCESS_TOKEN)
            return config
          },
        },
        userId: Vue.ls.get(USER_NAME),
      },
      taskType: 0, // 任务类型，默认0：待办任务，1：抄送任务，2：已办任务
      processInstanceId: '',
      returnShowConfirm: false, // 退回显示确认框
      messageId: '', // 工作台URL里面的msgId参数
      hiddenTaskDefKey: 'submit',
      showPrintBtn: false,
      outShowPrintBtn: false,
      custom: {
        budgetAmount: 0,
      },
      historyDialog: {
        // 审批历史模态框属性
      },
      mangerAndAuditUser: {},
      isCanEdit: '0',
      toMeetVisible: false,
      confirmMeetVisible: false,
      basicFreshKey: 0,
      snapshotConfigs: [
        {
          type: 'ref',
          value: 'imageWrapper'
        }
      ],
      progressVariables:{
        deptResult:1,
        techDeptResult:1
      },
      reportStatusColor:{},
      timeNodeColor:{}
    }
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll)
    this.projectBuildId = getParamValFromUrl('hatchProjectBuildId')
    this.messageId = getParamValFromUrl('messageId')
    this.getProjectAudit()
    //this.fetchMangerAndAuditUser()
    //this.checkProjectBuildIsCanEdit()
  },
  computed: {
  },
  methods: {
    getProjectAudit() {
      var vm = this
      getAction(vm.url.getProjectAuditById, { id: vm.projectBuildId }).then((res) => {
        if (res.code == 200) {
          vm.projectAuditInfo = res.result || {}
          vm.projectBuild = vm.projectAuditInfo.hatchProject
          vm.processInstanceId = vm.projectBuild.processInstanceId
          vm.projectClass = vm.projectBuild.projectClass
          vm.projectType = vm.projectBuild.hatchProjectTypeSubCategory
          vm.loadProcess = true
          vm.setAttaches()
          if (false) {
            this.outShowPrintBtn = true
          }
          console.log('processInstanceId---' + vm.processInstanceId)
        } else {
          vm.$message.warning('加载审批基本信息失败：' + res.message)
        }
      })
    },
    caseToShow(obj) {
      return caseToShow(obj)
    },
    previewAttach(record) {
      if (
        !this.mangerAndAuditUser.isManager &&
        !this.mangerAndAuditUser.isAuditor &&
        !this.mangerAndAuditUser.downAndView
      ) {
        return this.$message.warning('您没有权限查看附件')
      }
      var uploaderName = record.uploaderName
      console.log('uploaderName:' + uploaderName + 'id:' + record.id)

      let params={
        id:record.id,
        ftpKey:'ftp'
      };
      previewAttach(params).then(result=>{
        const url=URL.createObjectURL(result)
        if (this.projectBuild.projectClass == '40' || this.projectBuild.projectClass == '61') {
          window.open(process.env.BASE_URL+'/pdf/web/normalViewer.html?file=' + url)
        } else {
          window.open(process.env.BASE_URL+'/pdf/web/viewer.html?file=' + url)
        }
      }).catch(err => {
        this.$message.warning('下载文件失败');
      })
    },
    handleScroll() {
      //获取滚动时的高度
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      //
      // console.log(scrollTop)
      if (scrollTop > 227) {
        //大于200的时候要做的操作
        this.floatNavShow = true
        // this.tabPosition='right'
        // this.tabBarStyle={
        //   position: 'fixed',
        //   height: 'auto',
        //   right: '30px',
        // }
      } else {
        // this.tabPosition='top'
        // this.tabBarStyle={
        //   position: 'unset',
        //   height: 'auto',
        //   right: 'unset',
        // }
        this.floatNavShow = false
      }
    },
    setAttaches() {
      this.attachmentData=[];
      var attaches = this.projectAuditInfo.attaches
      if (attaches != null) {
        attaches.forEach((item) => {
          item.size = (parseInt(item.size) / 1024).toFixed(2) + 'KB'
          this.attachmentData.push(item)
        })
      }
    },
    //-------------流程回调------start
    beforeSubmit(res) {
      // if (this.checkOptionValue()) {
      //   var taskDefKey = this.currentTask.taskDefKey
      //   if (this.currentTask.lastAssignee) {
      //     //科技/工程类检测上会审批状态
      //     if ((this.projectClass === '10' || this.projectClass === '40' ) && taskDefKey === 'projectManager') {
      //       if (!this.projectAuditInfo.meetPassed) {
      //         this.toMeetVisible=true;
      //         return false
      //       }
      //     }
      //     if (this.projectClass === '30' && taskDefKey === 'projectManager') {
      //       if (!this.projectAuditInfo.meetPassed) {
      //         this.toMeetVisible=true;
      //         return false
      //       }
      //     }
      //   }
      // }
      this.$refs.childrenRef.custom = this.custom

      return true
    },
    afterSubmit(res) {
      // if (this.doAuditProjectPass()) {
      //   this.fetchMangerAndAuditUser()
      //   return true
      // } else {
      //   return false
      // }
      return true
    },
    beforeReject(res) {
      // 驳回前置动作
      if (this.checkOptionValue()) {
        // if (this.doAuditProjectNotPass()) {
        //   return true
        // } else {
        //   return false
        // }
        return true
      } else {
        return false
      }
    },
    afterReject(res) {
      // 用户点击驳回后成功返回后的处理
    },
    backAction(res) {
      // var backKey = this.$refs.childrenRef.currentNode.TASK_DEF_KEY_
      // if (this.doAuditProjectBack(backKey)) {
      //   this.$message({
      //     message: '退回成功',
      //     type: 'success',
      //   })
      // }
      return true
    },
    //撤回后
    afterCancelSubmit() {
      // if (this.doAuditProjectCancel()) {
      //   this.$message.success('撤回成功')
      // }
      return true;
    },
    // 生成抄送任务方法，非必须
    sendNotify() {
      // 参数一：抄送人，参数二：工作台打开详情链接
      this.$refs.childrenRef.saveBpmNotify('liangyh', 'http://xxxxx.com')
    },
    saveNotifyOpinion() {
      // 保存抄送意见前置动作
      return true;
    },
    attachPreview(file) {
      // 附件预览回调函数
    },
    customTaskHistory(data) {
      // 自定义审批历史函数，show-task-history设置成true显示审批历史按钮，data：审批历史数据
    },
    taskLoad(task) {
      // 当前任务加载回调函数，获取当前任务信息
      this.currentTask = task
    },
    //-------------流程回调------end
    async doAuditProjectPass() {
      var flag = false
      await getActionAsync(this.url.auditProjectPass, { projectBuildId: this.projectBuildId }).then((res) => {
        if (res.code == 200) {
          flag = true
        } else {
          this.$message.warning('流程审批通过接口异常:' + res.message)
        }
      })
      return flag
    },
    async doAuditProjectNotPass() {
      var flag = false
      await getActionAsync(this.url.auditProjectNotPass, { projectBuildId: this.projectBuildId }).then((res) => {
        if (res.code == 200) {
          flag = true
        } else {
          this.$message.warning('流程审批不通过接口异常:' + res.message)
        }
      })
      return flag
    },
    async doAuditProjectBack(backKey) {
      var flag = false
      await getActionAsync(this.url.auditProjectBack, { projectBuildId: this.projectBuildId, backKey: backKey }).then(
        (res) => {
          if (res.code == 200) {
            flag = true
          } else {
            this.$message.warning('流程审批退回接口异常:' + res.message)
          }
        }
      )
      return flag
    },
    async doAuditProjectCancel() {
      var flag = false
      await getActionAsync(this.url.auditProjectCancel, { projectBuildId: this.projectBuildId }).then((res) => {
        if (res.code == 200) {
          flag = true
        } else {
          this.$message.warning('流程审批退回接口异常:' + res.message)
        }
      })
      return flag
    },
    checkOptionValue() {
      var options = this.$refs.childrenRef.data
      if (options == '' || options == null || options == undefined) {
        // this.$message.warning('审批意见不能为空', 3000)
        return false
      } else {
        return true
      }
    },
    handleToggle(index) {
      if(index==1){
        this.getProjectAudit();
      }
      this.pageId = index
      // 滚动条滚动到顶部
      this.$nextTick(() => {
       this.$refs.imageWrapper.scrollIntoView();
      })     
    },
    fetchMangerAndAuditUser() {
      getAction(this.url.getMangerAndAuditUser, { id: this.projectBuildId }).then((res) => {
        if (res.success) {
          this.mangerAndAuditUser = res.result
        }
      })
    },

    checkProjectBuildIsCanEdit() {
      getAction(this.url.checkProjectBuildIsCanEdit, { id: this.projectBuildId }).then((res) => {
        if (res.success) {
          this.isCanEdit = res.result.currentAudit
        }
      })
    },
    handleEdit() {
      var url = '/projectbuildstup/baseInfo?projectClass='+this.projectClass +'&projectBuildId='+this.projectBuildId+'&currentAudit='+(this.isCanEdit=='1' ? 'true' : 'false');
      let urlJump = this.$router.resolve({ path: url })
      window.open(urlJump.href, '_blank')
    },
  },
  destroyed() {
    document.removeEventListener('scroll', this.handleScroll)
  }
}
</script>
<style lang="less" scoped>
.approval {
  height: 100%;
  background: #f5f5f5;
  ul {
    list-style: none;
  }
  .banner {
    height: 80px;
    background-image: url('../../../assets/banner-top.png');
    background-position: center;
  }
  .project-summary {
    padding: 0 125px 100px;
    position: relative;
    background: #f5f5f5;
    & /deep/ .ant-tabs-bar {
      border: none;
    }
    & /deep/ .ant-tabs-nav {
      background-color: #31a0e1;
      color: #fff;
      .ant-tabs-tab-active {
        background: #0581ca;
        color: #fff;
      }
      .ant-tabs-tab:hover {
        color: #fff;
      }
    }
    & /deep/ .ant-tabs {
      .ant-tabs-tab {
        margin: 0;
        padding: 10px 20px;
      }
      .ant-tabs-nav-container {
        width: 100%;
        background: #31a0e1;
        border-radius: 3px;
      }
    }
    .info-title {
      display: flex;
      align-items: center;
      margin: 10px 0;
      > img {
        margin-right: 5px;
      }
      > span {
        font-size: 16px;
        font-weight: 900;
        color: black;
      }
    }
    /deep/.ant-table-small > .ant-table-content > .ant-table-body {
      margin: unset;
    }
    &::v-deep .ant-table-thead > tr > th {
      padding-left: 20px;
      // font-size: px;
      // color: ;
      background: #dadee9 !important;
    }
    /deep/.ant-table-small,
    /deep/.ant-table-thead > tr:first-child > th:first-child,
    /deep/.ant-table-thead > tr:first-child > th:last-child {
      border-radius: unset;
    }
    ::v-deep .ant-table-tbody .ant-table-row {
      padding-left: 20px;
      background-color: #fff;
    }
    > div {
      margin-top: 1.5%;
    }
    .project-kpi {
      .info-detail {
        background-color: #fff;
        border: 1px solid #ebebeb;
        padding: 1% 2.5%;
        .info-list {
          padding: unset;
          display: flex;
          flex-wrap: wrap;
          margin: 0;
          > li {
            width: 33.33%;
            // height: 25px;
            display: flex;
            align-items: baseline;
            > img {
              margin-right: 5px;
            }
            .list-title {
              height: unset;
              font-weight: 900;
            }
          }
        }
      }
    }
    .project-results {
      .info-detail {
        background-color: #fff;
        border: 1px solid #ebebeb;
        padding: 1% 2.5%;
        .info-list {
          padding: unset;
          display: flex;
          flex-wrap: wrap;
          margin: 0;
          font-size: 16px;
          > li {
            width: 25%;
            height: 25px;
            display: flex;
            align-items: center;
            position: relative;
            > img {
              margin-right: 5px;
            }
            .list-title {
              max-width: 300px;
              height: unset;
              font-weight: 900;
            }
            .redfont {
              color: #fe6e6c;
              font-weight: bold;
              font-size: 18px;
              &.borderleft::after {
                content: '';
                width: 1px;
                height: 10px;
                color: red;
                border-left: 1px solid #e3e3e3;
                position: absolute;
                left: -10px;
                top: 0;
                bottom: 0;
                margin: auto;
              }
            }
          }
        }
      }
    }
    .project-schedule {
      .info-title {
        > img:nth-of-type(2) {
          width: 12px;
          margin-left: 5px;
        }
        > span:nth-of-type(2) {
          font-size: 14px;
          font-weight: normal;
        }
      }
    }
    .project-budget {
      font-size: 16px;
      ul {
        padding: 0;
      }
      .budget-content {
        .budget-box {
          .budget-title {
            padding: 5px 0 5px 20px;
            .fontblue {
              color: #368be4;
              display: inline-block;
              margin-right: 10px;
              font-weight: 900;
            }
            .fontred {
              color: #fc7a7f;
              font-weight: 900;
            }
          }
          .budget-content {
            padding: 0;
            li {
              display: flex;
              .bgColor {
                width: 200px;
                background-color: #dadee9;
                padding: 10px 0;
                display: inline-block;
                text-indent: 2em;
                border-bottom: 1px solid #fff;
              }
              .textCenter {
                text-align: center;
                text-indent: unset;
              }
              .bgwhite {
                background-color: #fff;
                // text-align: center;
                display: inline-block;
                padding: 10px 0 10px 30px;
                font-style: normal;
                border-bottom: 1px solid #f5f5f5;
                width: calc(100% - 550px);
                word-break: break-word;
              }
              > span:nth-of-type(2) {
                width: 150px;
              }
              > em:nth-of-type(2) {
                flex: 1;
                text-align: left;
                // text-indent: 2em;
              }
            }
          }
        }
      }
    }
    .attachment-detail {
      .attachment-content {
        & /deep/ .ant-table-small > .ant-table-content > .ant-table-body > table > .ant-table-thead > tr > th,
        /deep/.ant-table-small > .ant-table-content > .ant-table-body > table > .ant-table-tbody > tr > td {
          padding-left: 30px;
        }
      }
    }
    .approval-opinion {
      .opinion-box {
        padding: 0 5px;
        .opinion-detail {
          border-left: 1px dashed #e1e1e1;
          padding: 0px 15px;
          position: relative;
          &::before {
            content: '';
            position: absolute;
            background-color: #44b785;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            left: -5px;
            top: 5px;
          }
          .opinion_title {
            font-weight: 900;
          }
          .opinion_info {
            border: 1px solid #ededed;
            background-color: #fff;
            padding: 20px 25px 0;
            margin: 5px 0;
            .signature {
              display: inline-block;
              width: 100%;
              text-align: right;
              font-weight: 700;
              > i {
                font-style: normal;
                color: #63ace5;
              }
            }
            .controlBox {
              text-align: right;
              margin: 1% 0;
              &/deep/ .ant-btn {
                border-radius: unset;
                margin-left: 5px;
                padding: 0 22px;
                font-size: 12px;
                height: 30px;
              }
              &/deep/ button:nth-last-child(1) {
                padding: 0 10px;
              }
            }
          }
        }
      }
    }
  }
  .project-summary {    
    > ul {
      display: flex;
      background-color: #31a0e1;
      border-radius: 1px;
      color: #fff;
      padding: 0;
      font-size: 16px;
      font-weight: 900;
      li {
        padding: 10px 15px;
        cursor: pointer;
        &:hover, &.clickShow{
          background-color: #0581ca;          
        }
      }
    }
    .floatNav {
      position: fixed;
      top: 50px;
      margin-top: 221px;
      display: flex;
      flex-direction: column;
      right: 15px;
      opacity: 0.8;
      z-index: 1;
    }
  }
  .process-engine {
    /deep/ #process-container {
      width: unset !important;
    }
    /deep/ #process-container .process-item .info-fullMessage {
      max-width: 1200px;
    }
  }
  /deep/ .el-loading-mask{z-index: 1 !important;}
}
@media (max-width: 1080px){
  div.approval .project-summary{padding: 0 30px 100px}
}
</style>